<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问内容</title>
    <script>
        function f1(){
            let d1 = document.getElementById("d1");
            // innerHTML:访问标签体的内容,能识别HTML
            // 返回的内容中包含所使用到的HTML元素
            console.log(d1.innerHTML);

            // 赋值时可以赋值HTML元素,会呈现出对应效果
            d1.innerHTML = "<h2>innerHTML重新赋值</h2>";
        }
        function f2(){
            let d2 = document.getElementById("d2");
            // innerText:访问标签体的内容,不能识别HTML
            // 返回的内容只包含文本内容,没有HTML元素
            console.log(d2.innerText);

            // 赋值时不能赋值HTML元素,如果包含HTML元素,只会作为普通字符串展示
            d2.innerText = "<h2>innerText重新赋值</h2>";
        }
    </script>
</head>
<body>
<div id="d1" onclick="f1()" style="width: 200px;height: 100px;background-color: red;">
    <h2>这是div中的标题</h2>
</div>
<div id="d2" onclick="f2()" style="width: 200px;height: 100px;background-color: green;">
    <h2>这是div中的标题</h2>
</div>
</body>
</html>